<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="./style.css" rel="stylesheet" />
  </head>

  <body>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3.2.31/dist/vue.esm-browser.js"
        }
      }
    </script>

    <!--
This example fetches latest Vue.js commits data from GitHub’s API and displays them as a list.
You can switch between the two branches.
-->

    <script type="module">
      import { createApp, ref, watchEffect } from "vue";

      const API_URL = `https://api.github.com/repos/vuejs/core/commits?per_page=3&sha=`;
      const branches = ["main", "v2-compat"];

      createApp({
        setup() {
          const currentBranch = ref(branches[0]);
          const commits = ref(null);

          watchEffect(async () => {
            // this effect will run immediately and then
            // re-run whenever currentBranch.value changes
            const url = `${API_URL}${currentBranch.value}`;
            commits.value = await (await fetch(url)).json();
          });

          function truncate(v) {
            const newline = v.indexOf("\n");
            return newline > 0 ? v.slice(0, newline) : v;
          }

          function formatDate(v) {
            return v.replace(/T|Z/g, " ");
          }

          return {
            branches,
            currentBranch,
            commits,
            truncate,
            formatDate,
          };
        },
      }).mount("#app");
    </script>

    <div id="app">
      <h1>Latest Vue Core Commits</h1>
      <template v-for="branch in branches">
        <input type="radio" :id="branch" :value="branch" name="branch" v-model="currentBranch" />
        <label :for="branch">{{ branch }}</label>
      </template>
      <p>vuejs/vue@{{ currentBranch }}</p>
      <ul>
        <li v-for="{ html_url, sha, author, commit } in commits">
          <a :href="html_url" target="_blank" class="commit">{{ sha.slice(0, 7) }}</a>
          - <span class="message">{{ truncate(commit.message) }}</span><br />
          by
          <span class="author">
            <a :href="author.html_url" target="_blank">{{ commit.author.name }}</a>
          </span>
          at <span class="date">{{ formatDate(commit.author.date) }}</span>
        </li>
      </ul>
    </div>
  </body>
</html>
